什麼是物件（object）

JS 是以物件為導向設計（Object-oriented programming, OOP）的程式語言。從字串到陣列，甚至是函式，或是瀏覽器 API，對 JS 來說，大多數都算是物件（object）。這些物件把一些相關的資訊或功能包裝在一起， 等待哪天被召喚供開發者使用。一個物件中，可能包含了多對 key 與 value 的組合，操作物件時，需要以 key 來指定目標。

以物件實字／體（object literal）宣告

// 物件的 key-value 組合
let obj = { key: "value" }

這是最簡單也最常見的宣告法，稱為物件實字：直接給予一個變數，並將 key 與 value 用大括號 { } 包起來，並賦值給變數。

// 一個含有函式的物件宣告
let user = {
  name: "otter",
  age: 18,
  sayHi: function () {
    return "hi";
  }
};

物件的取值與新增

• 點記法（Dot notation）：使用 . 以存取物件的屬性或呼叫函式。

// 續上例
user.id; // otter
user.sayHi(); // hi

• 括弧記法 (Bracket notation)：以中括號 [ ] 來存取物件屬性
  • 有點像在陣列中取出內容
  • 須注意中括號內只接受字串形式的 key
  • 若要以變數存取物件，只能使用括弧記法
  • 若變數名稱含有特殊字元，只能使用中括號取值

// 上面的點記法也可改寫為
user["name"]; // otter
user["sayHi"]; // Function: sayHi

• 再賦值與新增／更新內容

user.name = "otterboxy";
user["family"] = {
  couple: "boxy",
  daughter: "littleOtter"
};
console.log(user); 
/*{
  name: 'otterboxy',
  age: 18,
  sayHi: [Function: sayHi],
  family: { couple: 'boxy', daughter: 'littleOtter' }
}*/

後端 API 噴回來的資訊，通常是一包包的 JSON 格式。對前端來說，需要把它處理成能用的格式，以便每次的資訊提取。以下介紹兩個處理的好方法：

Object.keys()

• 取得目標物件既有的 key 名稱。
• 不一定會依照物件原有順序排列。

// 語法
Object.keys(obj)

參數說明：

• obj：目標的物件。
• 回傳值：將目標物件內的所有 key 名稱以陣列形式傳回。

來個練習吧！

// 問題 from GPT
// 問題：假設有一個名為 person 的物件，其中包含姓名、年齡和地址等屬性。如何使用 Object.keys() 來獲取所有的屬性名稱並將它們儲存在一個陣列中？
const person = {
  name: "John",
  age: 30,
  address: "123 Main St"
};

let keys = Object.keys(person);

console.log(keys); // 'name', 'age', 'address'

Object.entries()

• 將目標物件的每個 key-value pair 以陣列方式傳回

參數說明：

• obj：目標的物件。
• 回傳值：目標物件內的所有屬性以陣列形式的 key-value pair 傳回。

來個練習吧！

// 問題 from GPT
// 問題1：使用 Object.entries() 將物件轉換成鍵值對陣列
const obj = {
  name: "Alice",
  age: 30,
  city: "Wonderland"
};

let newArr = Object.entries(obj);

console.log(newArr); //  [ 'name', 'Alice' ], [ 'age', 30 ], [ 'city', 'Wonderland' ]

接下來進入到很重要的、
讓人暈過來又暈過去的傳值、傳參考 ∑(ι´Дン)ノ

參考資料

• Object 物件 - JavaScript 教學｜ALPHA Camp - JavaScript 入門指南，https://javascript.alphacamp.co/object.html
• JavaScript 物件介紹 - 學習該如何開發 Web | MDN，https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects
• JavaScript 物件基礎概念 - 學習該如何開發 Web | MDN，https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects/Basics
• 重新介紹 JavaScript - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Language_overview
• JavaScript Object 物件 - JavaScript (JS) 教學 Tutorial，https://www.fooish.com/javascript/object.html
• Object.keys() - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
• Object.entries() - JavaScript | MDN，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries